import { useState } from 'react';

import { ReactComponent as Check } from '@/assets/images/shared/icon-check.svg';
import { Button } from '@/shared/ui';
import cn from 'classnames';

import { ColouredInfoBlock } from '../ColouredInfoBlock';
import cs from './Menu.module.scss';

export const Menu = () => {
  const [checked1, setChecked1] = useState(false);
  const [checked2, setChecked2] = useState(false);

  return (
    <ColouredInfoBlock className={cs.block} reverseResponsive>
      <h2 className="h2">Меню</h2>
      <p className={cn('p-reversed', cs.descr)}>
        Просматривайте готовое меню
        <br className="hide-greater-xs" /> на <span className="hide-less-xs">сегодня и </span>
        все <span className="hide-less-xs">остальные </span>
        дни прикорма
      </p>
      <Button data-testid="checkbox-1" onClick={() => setChecked1(!checked1)}>
        <div className={cn(cs.breakfast, { [cs.active]: checked1 })}>
          <div className={cs.flex}>
            <span className={cs.title}>Завтрак, 120 г</span>
            <div className={cs.checkbox}>{checked1 && <Check />}</div>
          </div>
          <span className={cs.item}>Кукурузная каша, 110 г</span>
          <span className={cs.item}>Пшенная каша, 10 г</span>
          <span className={cs.item}>Желток, 10 г</span>
        </div>
      </Button>
      <Button data-testid="checkbox-2" onClick={() => setChecked2(!checked2)}>
        <div className={cn(cs.lunch, { [cs.active]: checked2 })}>
          <div className={cs.flex}>
            <span className={cs.title}>Обед, 190 г</span>
            <div className={cs.checkbox}>{checked2 && <Check />}</div>
          </div>
          <span className={cs.item}>Пюре из кабачка, 140 г</span>
          <span className={cs.item}>Кукурузная каша, 30 г</span>
          <span className={cs.item}>Пюре из брокколи, 10 г</span>
          <span className={cs.item}>Гречневая каша, 10 г</span>
        </div>
      </Button>
    </ColouredInfoBlock>
  );
};
